<!-- HotFruits.vue -->
<template>
  <div class="hot-fruits">
    <h2>热门水果</h2>
    <ul>
      <li v-for="(fruit, index) in fruits" :key="index" class="fruit-item">
        <img :src="fruit.image" :alt="fruit.name" class="fruit-image" />
        <div class="fruit-info">
          <h3>{{ fruit.name }}</h3>
          <p>{{ fruit.description }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HotFruits",
  data() {
    return {
      fruits: [
        {
          name: "苹果",
          description: "营养丰富，富含维生素C和膳食纤维。",
          image: require("@/assets/page1/HotSales/苹果系列.jpg"),
        },
        {
          name: "凤梨",
          description: "热带水果，口感酸甜，助消化。",
          image: require("@/assets/page1/HotSales/凤梨系列.jpg"),
        },
        {
          name: "草莓",
          description: "“水果皇后”，香甜多汁，抗氧化强。",
          image: require("@/assets/page1/HotSales/草莓系列.jpg"),
        },
        {
          name: "草莓",
          description: "“水果皇后”，香甜多汁，抗氧化强。",
          image: require("@/assets/page1/HotSales/草莓系列.jpg"),
        },

      ],
    };
  },
};
</script>

<style scoped>
.hot-fruits {
  padding: 20px;
  background-color: #f9f9f9;
}

.fruit-item {
  display: flex;
  align-items: center;
  margin-bottom: 33px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.fruit-image {
  width: 100px;
  height: auto;
  margin-right: 20px;
  border-radius: 8px;
}

.fruit-info h3 {
  font-size: 1.2em;
  color: #333;
}

.fruit-info p {
  font-size: 0.9em;
  color: #666;
}
</style>
